PopupBottom

<template>
    <van-popup v-model:show="show" :close-on-click-overlay="false" @close="onClose" closeable position="bottom"
        class="custom-popup-container">
        <div class="popup-container">
            <div class="title">福利赏兑换码</div>
            <div class="input-box">
                <textarea class="input" v-model="couponCode" resize="none" wrap='off' :rows="1" type="text"
                    placeholder="请输入兑换券码" />
                <!-- <input class="input" ref="inputRef" placeholder="请输入兑换券码" type="text" v-model="couponCode"
                    @paste.native="onPaste"> -->
                <!-- <div class="btn-paste">粘贴</div> -->
            </div>
            <div class="btn-click btn-confirm btn-blue mt-20 btn-six-edge" @click="onConfirm">确定</div>
            <div class="btn-click btn-get-more" @click="onGetMore">去获得更多>></div>
        </div>
    </van-popup>
</template>

<script lang="ts" setup name="PopupBottom">
import { ref, onMounted, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import { postRedeem } from '../../../api/Home';
import { showToast } from 'vant';
import { ScrollInput } from './const.js'
const getMoreUrl = 'https://m.weibo.cn/c/wbox?id=3bk9pkv39w&luicode=40000385&source=wbox'
const router = useRouter();
const scrollInputObj = ref<any>({})
const show = ref<boolean>(false)
const couponCode = ref<string | null>(null);
const examId = ref<string | null>(null);
const onClose = () => switchShow(false);
const switchShow = (isShow: boolean, id?: string | number) => {
    if (id !== undefined) {
        examId.value = `${id}`;
    }
    if (!isShow) {
        couponCode.value = null
        if (scrollInputObj.value.removeListener) {
            scrollInputObj.value.removeListener()
        }
    } else {
        setTimeout(() => {
            scrollInputObj.value = ScrollInput('.input-box')
        }, 200);
    }
    show.value = isShow;
}
const onPaste = (e: any) => {
    // console.log(e);
    // console.log(e.clipboardData.getData('text'));
}
const onGetMore = () => window.location.href = getMoreUrl
const onConfirm = () => {
    if (couponCode.value === null || couponCode.value === '' || couponCode.value === undefined) {
        showToast('请输入兑换码')
        return
    }
    if (examId.value === null) {
        return
    }
    postRedeem({
        coupon_code: couponCode.value,
        exam_id: examId.value!
    }).then(res => {
        const { code, data } = res
        if (`${code}` === '0') {
            showToast('兑换成功')
            setTimeout(() => {
                router.push(`/answer/${data.exam_id}/${data.id}/start`)
                couponCode.value = null
                switchShow(false)
            }, 500);
        }
    })
}
// onActivated(() => {
//     setTimeout(() => {
//         ScrollInput('.input-box')
//     }, 200);
// })
defineExpose({
    switchShow
})

/**
 *  测试用的 code码  （id可以随便传）
 * 
 * 
 * 
 * 
线上测试用
C9Cix61V3tLq
GZsfhiRWTXrA
Yoh1Vpp9sIsk

AZXtc2yJc4XN
0H0ZlfJgxMro
iPCq1eZFXsDi
gpDH2X49JRH8
lBOUz2vjjDm7
PWVBIzLwzZrQ
2IHxvXGa2EYo

本地测试用
kJ3ul5kNRPeVguowFIarewwfEmRY
KckUiuq7l9jxdCjPuDjuTi6JrBuK
bCkpqEY2U9R04tI9KF0Jq35zZ4HE
LHyXGRRBe1Xpo5vn05S2vuFCB7zY
MxuccjrIGVCLEvcoVhCn1q4mM6Pa
WlyXS4Nx7rA9CxGpH2kDkiQRjpTs
6O574TSakVgoxmRcfneQwShlNNYF
QWBIqbrEojQw4jZnEou2AN63xXBv
ezXZsVpcSiBiMhRDgwubrkBH52ht
cOmmnRUi0ZTJGJgG0vdHCLfcudIQ
dG5AXQqrZu0e6vsiyNw8M1IUfPxx
fQwmcLQkclAoNyPKCoAP0MqXQKSi
zpawYWki0q8z7DmsAhx3R3Y0yrBx
DrGik2Wz0ohobKBWK4DzMeXh3sns
SA9pISYJkMExa4FG0oshcx4xfwOh
gCEUzLTVEIA6DQaUh6TKbLnZpsjy
k69mBKGQSHRcNAKL2Ah37n8NawLp
TGnJzG2pn36Rh18z2QuzmYcOkhA6
CAlDCa7HOuTMCdMVcun2cQpDM1da
mFjQSaoykD80Q6Y0yiYhveNt4UaR
20BC7IDMpecF1IqEFPHzlmVbbs8J
8UD6xIT13GtlwqGP9lmc1bRDxPpz
UOaaYHcvhsAcSMESnVJzcN9M742L
JcdYtuVE6H6RSoWY0eJmKZQDjokP
ZNbGUzf71hXZnpQYWMiZKU4ckZcq
GTXoO0b2vtz5BD6qqyljLYD8HwNp
LxNCmsy1bq8GqiFkWhnKCclhtbPT
5O2jZsrRdFO7vCZDESZVdfCqsSoF
9qjguxGdadcY7MjpoFhifaQa9mtw
XNAj0ScadZmp6RbE2lOpN993mWPh
fvrhg8VOy6FCl9hRbNtO6ABfQlIG
arz8Ozh6X7iLCIYWNmpY3B4endzY
ga6LrfdGaWkxXVXMFkZoxU6PFTkl
0TRWlmALtz1cXbeRTjv5jKsoEAEA
k2u4BEZqC7VlFHSLQWUM2IX276qq
sq4Mb96OYO4AP7Burwys09frOOcr
V9UzrpTbBYng9ODkyL26WhPppqAt
9C6IRPkgXYheCKbkt8JmfeNsAPtB
HgsDGAuVr45eGulazFGMZVcIWJAs
ZBZOKeEjWJWZebiqAv2hRrO7A6yn
 */
</script>

<style lang="scss" scoped>
.custom-popup-container {
    height: 300px !important;
}

.popup-container {
    height: 100%;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, #32168F 0%, #070510 100%);

    .title {
        text-align: center;
        height: 29px;
        font-family: Source Han Sans;
        font-size: 20px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0em;
        color: $color_white;
    }

    .input-box {
        height: 40px;
        margin-top: 20px;
        position: relative;

        .input {
            width: 327px;
            height: 100%;
            border-radius: 4px;
            background: #F7F7F7;
            padding-left: 20px;
            padding-right: 60px;
            padding-top: 11px;
            white-space: nowrap;
            overflow: hidden;
        }

        .btn-paste {
            position: absolute;
            top: 10px;
            right: 15px;
            background-color: #FFDD00;
            padding: 3px 5px;
            color: #ffffff;
            background-color: rgba(0, 0, 0, .5);
            border-radius: 4px;
        }
    }

    .btn-confirm {
        width: 238px;
    }

    .btn-get-more {
        font-size: 12px;
        color: #FFDD00;
        margin-top: 20px;
    }
}
</style>